<template>
  <div
    class="dragBox"
    id="dragBox"
    :style="{
      top: `${thumbTop}px`,
      left: `${thumbLeft}px`,
    }"
    :class="{ pointer_events: isRoller }"
  >
   
    <div
      ref="madeScreenshot"
      id="madeScreenshot"
      :style="{
        width: `${thumbW}px`,
        height: `${thumbH}px`,
      }"

      @mousedown="mousedown"
    >
      <div class="box_info">{{ thumbW }} * {{ thumbH }}</div>
    </div>

    <div
      v-loading="loading"
      class="form_content"
      id="form_content"
      :style="{
        left: `${contentLeft}px`,
      }"
    >
      <el-form ref="examineForm" :model="examineForm" :rules="examineRules" label-width="160px">
        <el-form-item :label="$t('caseorder.anli75')" prop="examineTyle">
          <el-select
            v-model="examineForm.examineTyle"
            size="small"
            :placeholder="$t('caseorder.anli35')"
          >
            <el-option
              v-for="item in res_form.items"
              :key="item.id"
              :label="item.dictLabel"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
     
        <el-form-item :label="$t('caseorder.anli76')" prop="description">
          <el-input
            class="description-input"
            v-model="examineForm.description"
            show-word-limit
            maxlength="200"
            type="textarea"
            :rows="4"
            :placeholder="$t('caseorder.anli77')"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <div class="dialog-footer btnBox">
        <el-button size="small" @click="examineCancel">{{ $t('add.add31') }}</el-button>
        <el-button size="small" type="primary" @click="examineConfirm">{{
          $t('add.add30')
        }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { imagedata_to_image } from '@/utils/index';
import html2canvas from 'html2canvas';
export default {
  name: 'madeScreenshots',

  components: {},

  data() {
    return {
      thumbW: 250,
      thumbH: 250,
      thumbTop: 0,
      thumbLeft: 0,

      contentLeft: 270,
      examineForm: {
        examineTyle: '',
        description: '',
        picPath: '',
      },
      examineRules: {
        examineTyle: [{ required: true, message: this.$t('caseorder.anli79'), trigger: 'change' }],

        description: [{ required: true, message: this.$t('caseorder.anli77'), trigger: 'blur' }],
      },
      loading: false,
      // 监听是否滚轮
      isRoller: false,
      timer: null,
      observer: null,
    };
  },
  props: {
    res_form: {
      type: Object,
    },
  },
  created() {},
  mounted() {
    window.addEventListener('message', (event) => {
      let data = event.data;
      if(data.type === 'cancellationRoller'){
        this.isRoller = false;
      }
 
    });
    // this.$EventBus.$on('cancellationRoller', () => {
    

      
  
    // });
    this.initPosition();
    this.handleRoll();
  },
  beforeDestroy() {
    this.observer.disconnect();
  },

  methods: {
    initPosition() {
      let preview_box = document.getElementById('preview_box');
      this.observer = new ResizeObserver((entries) => {
        for (let entry of entries) {
          const { width, height } = entry.contentRect;
          this.thumbTop = preview_box.offsetHeight / 2 - this.thumbH / 2;
          this.thumbLeft = preview_box.offsetWidth / 2 - this.thumbW / 2;
          // 在这里可以执行相应的操作，根据div的大小变化调整布局或其他操作
        }
      });
      this.observer.observe(preview_box);
    },
    handleRoll() {
      let preview_box = document.getElementById('preview_box');
      preview_box.addEventListener('contextmenu', (event) => {
        event.preventDefault(); // 取消默认右键菜单行为
      });
      window.addEventListener('mousewheel', (event) => {
        this.isRoller = true;
      });

      window.addEventListener('mousedown', (event) => {
        if (event.button === 2) {
          this.isRoller = true;
        }
      });
    },

    mousedown(event) {
      // 判断是否是鼠标左键
      if (event.button !== 0) return;
      let preview_box = document.getElementById('preview_box');
      preview_box.addEventListener('mousemove', this.mousemove);
      preview_box.addEventListener('mouseup', this.mouseup);
    },
    mousemove(event) {
      event.preventDefault();
      event.stopPropagation();
      this.thumbLeft = event.clientX - 240 - this.thumbW / 2;
      this.thumbTop = event.clientY - (80 + 120 + 40 + 80) - this.thumbH / 2;
      this.setLimit();
    },
    setLimit() {
      let order_preview_ref = document.getElementById('preview_box');

      let form_content_ref = document.getElementById('form_content');
      if (this.thumbLeft <= 0) {
        this.thumbLeft = 0;
      }
      if (this.thumbTop <= 0) {
        this.thumbTop = 0;
      }
      if (this.thumbTop > order_preview_ref.offsetHeight - this.thumbH) {
        this.thumbTop = order_preview_ref.offsetHeight - this.thumbH;
      }
      console.log(this.thumbLeft, order_preview_ref.offsetWidth);
      if (this.thumbLeft <= 370) {
        this.contentLeft = 270;
      } else if (
        this.thumbLeft > order_preview_ref.offsetWidth - 620 &&
        this.thumbLeft < order_preview_ref.offsetWidth - this.thumbW
      ) {
        this.contentLeft = -form_content_ref.offsetWidth - 20;
      } else if (this.thumbLeft > order_preview_ref.offsetWidth - this.thumbW) {
        this.contentLeft = -form_content_ref.offsetWidth - 20;

        this.thumbLeft = order_preview_ref.offsetWidth - this.thumbW;
      }
    },
    mouseup() {
      this.removeMouseEvent();
    },
    removeMouseEvent() {
      let preview_box = document.getElementById('preview_box');
      preview_box.removeEventListener('mousemove', this.mousemove);
      preview_box.removeEventListener('mouseup', this.mouseup);
    },

    // 审核项表单确认部分
    examineCancel() {
      this.examineForm = {
        examineTyle: '',
        description: '',
      };
      this.$emit('closeScreenshot');
    },
    examineConfirm() {
      this.$refs['examineForm'].validate((valid) => {
        if (valid) {

          this.loading = true;
          const iframe = document.getElementById('preview_iframe');
          const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

         

          // var canvas = document.createElement("canvas");
          let width = iframe.offsetWidth;
          let height = iframe.offsetHeight;
          let opts = {
            scale: 1, //不管上面的scale是多少倍，这里只能取1，否则会显示不完全
            backgroundColor: 'white',
            // canvas: canvas,
            allowTaint: true,
            useCORS: true,
            logging: true,
            width: width,
            height: height,
            x: 0, //x坐标
            y: 0, //y坐标
          };
          html2canvas(iframeDocument.body, opts).then((canvasRes) => {
            // console.log('canvasRes------',canvasRes);

            const ctx = canvasRes.getContext('2d');
            const imageData = ctx.getImageData(
              this.thumbLeft,
              this.thumbTop,
              this.thumbW,
              this.thumbH,
            );

            this.examineForm.picPath = imagedata_to_image(imageData);
     
            // // 提醒父组件修改组织数据部分内容
            this.$emit('changeData', this.examineForm);
            this.loading = false;
          });
        } else {
          this.loading = false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dragBox {
  position: absolute;
  height: 250px;

  display: flex;
  flex-wrap: wrap;
 

  .form_content {
    position: relative;
    background: #f7f7f7;

    padding: 20px;
    position: absolute;
    // width: 350px;
    width: 415px;
    height: 250px;
    ::v-deep  .description-input{
      textarea{
        padding-right: 45px;
      }
      .el-input__count{
        right: 16px;
      }
    }
    .btnBox {
      position: absolute;
      bottom: -5px;
      right: 0px;
      text-align: right;
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding: 0 10px 10px 0px;
      box-sizing: content-box;
    }
    ::v-deep  .el-form-item__label{
      text-align: left !important;
    }
  }
}

.dragBox::after {
  content: '';
  display: table;
  clear: both;
}

.pointer_events {
  pointer-events: none;
}

#madeScreenshot {
  width: 250px;
  height: 250px;
  border: 1px solid #003e67;
  cursor: move;

  .box_info {
    height: 20px;
    line-height: 20px;
    position: absolute;
    left: 0;
    top: -20px;
  }
}



::v-deep  textarea {
  /* 禁止拉伸 */
  resize: none;
}
</style>
